<template>
    <div class="rone">
         <!-- 顶部组件 -->
        <header-nav></header-nav>
        <!-- <router-link tag="div" to="/singer/songerss">1235325</router-link> -->
        <van-index-bar>
            <div v-for="(item,index) in rightList" :key="index">
                <van-index-anchor :index="item.name" />
                <van-cell >
                    <template #title>
                        <!-- <div class="van-cell-title" v-for="ele in item.data" :key="ele.id"> -->
                        <router-link tag="div"  :to="'/singer/songerss?id='+ele.id" class="van-cell-title" v-for="ele in item.data" :key="ele.id" >
                             <!-- <van-image
                             lazy-load
                             width="45"
                             height="45"
                             :src="ele.img1v1Url"
                            /> -->
                           <img width="45" height="45" v-lazy="ele.img1v1Url" alt="" v-if="ele.img1v1Url">
                            <span class="custom-title" v-if="ele.img1v1Url">{{ele.name}}</span>
                         </router-link>
                        <!-- </div> -->
                    </template>
                </van-cell>
            </div>
        </van-index-bar>
        
        <!-- 底部导航 -->
        <!-- <foot-nav></foot-nav> -->
    </div>
</template>
<script>
//引入头部组件
import headerNav from "../components/base/headerNav.vue"
//引入底部导航
// import footNav from "../components/base/footNav.vue"

//引入数据
import {getsingerlist} from "../api/singer"

export default {
    data(){
        return{
            //  leftList:["A","B","C","D","E","F","G","H","I","J","K"],
            leftList:["A","B","C"],
            imgsingers:[],
            rightList:[]
        }
    },
    methods:{
        ArtistList(){
            for(let i = 0 ;  i < this.leftList.length;i++){
                this.rightList.push({
                    name:this.leftList[i],
                    
                })
            }
        }
    },
    created(){
        // this.getsing();

        this.ArtistList();//构建对象


        for(let i =0 ; i < this.leftList.length;i++){
             
            getsingerlist({
                type:1,
                area:96,
                initial:this.leftList[i]
            }).then(data=>{
                  let index = this.rightList.findIndex(item=>item.name == this.leftList[i]);
                  this.$set(this.rightList[index],'data',data.artists)

            })
                
        }
    },
    components:{
    headerNav,
    // footNav
  }
}
</script>

<style lang="less">

.van-cell-title{
  display: flex;
  align-items: center;
//   margin-top: 8px;
  height: 45px;
  padding: 5px;
  border-bottom: 1px solid #D9DADB;
  span{
    margin-left:20px;
  }

}
.van-index-anchor{
  background-color: #D9DADB;
}
.rone{
    padding-bottom: 40px;
}
</style>